<template>
  <div class="input-content">
    <el-input
      :placeholder="placeholder"
      v-model.trim="amountValue"
      @input="handleAmountChange"
      @change="handleAmountBlur"
      :disabled="disabled"
      :style="styleValue"
    ></el-input>
  </div>
</template>
 
<script>
  export default {
    props: {
      amount: {
        type: String,
        default: ''
      },
      disabled: {
        type: Boolean,
        default: false
      },
      placeholder: {
        type: String,
        default: '请输入'
      },
      styleValue: {
        type: String,
        default: 'width: 150px'
      }
    },
    data() {
      return {
        amountValue: this.amount
      }
    },
    watch: {
      // 默认显示金额
      amount(val) {
        this.handleAmountChange(val)
      }
    },
    methods: {
      handleAmountChange(val) {
        console.log(val,'change')
            let value = val
        this.amountValue = ('' + value)
                .replace(/[^\d^\.]+/g, '') 
                .replace(/^0+(\d)/, '$1') 
                .replace(/^\./, '0.') 
                .match(/^\d*(\.?\d{0,2})/g)[0] || '' ;
       this.$emit('handleAmountChange', this.amountValue)
      },
      handleAmountBlur(val){
        if(val == 0){
          console.log(this.amountValuen)
          this.amountValuen = "";
          this.amount = "";
          this.$emit('handleAmountChange', this.amountValue) 
           console.log(this.amountValuen,'61')
        }
      }
    }
  }
</script>
<style lang='scss' scoped>
.input-content {
  display: inline-block;
}
</style>